<template>
    <div class="testimonial__item">
        <div class="testimonial__item-inner">
            <div class="testimonial__item-content">
                <span><i class="fa-solid fa-quote-left"></i></span>
                <p>
                    "I have minim mollit non deserunt ullamco est sit aliqua dolor do Eam
                                            et sint. Velit officia consequat duis enim velit mollit. Exercitati veniam
                                            consequat sunt nostrud amet.Amet minim mollit non desu ulla mco est sit
                                            aliqua dolor do amet sint. Velit officia consequat enim velit mollit.
                                            Exercitation veniam consequat."
                </p>
                <div class="testimonial__footer">
                    <div class="testimonial__author">
                        <div class="testimonial__author-thumb">
                            <img :src="details.thumbnail" alt="author">
                        </div>
                        <div class="testimonial__author-designation">
                            <h6>{{ details.name }}</h6>
                            <span>{{ details.role }}</span>
                        </div>
                    </div>
                    <div class="testimonial__rating">
                        <span v-for="i in 5" :key="i"><i class="fa-solid fa-star"
                                :class="{ 'active': details.rating >= i }"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        details: {
            type: Object,
            default: () => { },
        },
    },
}
</script>

<style scoped>
.active {
  color: #F4BD15 !important;
}
</style>